<template>
    <!-- 侧边栏组件 -->
    <el-aside :width="main.isCollapse ? '60px' : '160px'" class="aside-box">
        <el-menu :collapse-transition="false" :collapse="main.isCollapse" background-color="#777" text-color="#fff" active-text-color="rgb(148.6, 212.3, 117.1)" :default-active="$route.name" class="el-menu-vertical-demo">
            <h3 v-show="!main.isCollapse" class="aside-title">VUE后台</h3>
            <h3 v-show="main.isCollapse" class="aside-title">VUE</h3>
            <el-menu-item  @click="clickMenu(item)" v-for="item in onChildren()" :key="item.name" :index="item.name">
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </el-menu-item>

            <el-sub-menu v-for="item in hasChildren()" :index="item.label" :key="item.name">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item @click="clickMenu(subItem)" v-for="(subItem, subIndex) in item.chidren" :key="subItem.path" :index="subItem.name">
                        <el-icon>
                            <component :is="subItem.icon"></component>
                        </el-icon>
                        <span>{{ subItem.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>

        </el-menu>
    </el-aside>
</template>
<script setup>
// 引入仓库
import { useAside } from '../store/index.js';
const main=useAside()
// 引入路由
import { useRouter } from 'vue-router';
const router=useRouter()
// 路由数据
const list = [
    {
        name: 'home',
        path: '/',
        label: '首页',
        icon: 'house',
    },
    {
        name: 'user',
        path: '/user',
        label: '用户管理',
        icon: 'user',
    },
    {
        label: '其他',
        icon: 'starFilled',
        chidren: [
            {
                name: 'page1',
                path: '/page1',
                label: '页面一',
                icon: 'tools',
            },
            {
                name: 'page2',
                path: '/page2',
                label: '页面二',
                icon: 'tools',
            },
        ]
    }
]
// 点击侧边栏
const clickMenu=(item)=>{
    // console.log(item.name);
    router.push({
        name:item.name
    })
    main.selectMenu(item)
}
const onChildren = () => {
    return list.filter((item) => !item.chidren)
}
const hasChildren = () => {
    return list.filter((item) => item.chidren)
}

</script>

<style lang="less">
.aside-box{
    background-color: #777;
    .aside-title{
        text-align: center;
        font-weight: 700;
        color: #fff;
        line-height: 56px;
    }

}


</style>